<template>
	<view>
		<view class="tip">
			请输入您的银行卡信息
		</view>
		<view class="input">
			<view class="input_left">
				持卡人:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="name" placeholder="请输入用户名" @blur="usernames()" />
				<view class="textdTips">
					{{nameTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				身份证:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="password" placeholder="请填写身份证号" @blur="passwords()" />
				<view class="textdTips">
					{{passwordTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				身份证有效期:
			</view>
			<view class="input_right">
				<view class="example-body">
					<uni-datetime-picker v-model="datetimerange" type="datetimerange" start="2021-1-1 12:00:00"
						end="2050-1-1 20:00:00" rangeSeparator="至" @change="datetimeranges()" :clear-icon="false" />
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				银行卡号:
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="newpassword" placeholder="请输入银行卡号" @blur="newpasswords()" />
				<view class="textdTips">
					{{newpasswordTips}}
				</view>
			</view>
		</view>
		<view class="input">
			<view class="input_left">
				手机号：
			</view>
			<view class="input_right">
				<input class="uni-input" v-model="okpassword" placeholder="请输入手机号" @blur="okpasswords()" />
				<view class="textdTips">
					{{okpasswordTips}}
				</view>
			</view>
		</view>

		<button disabled style="width: 96%;height: 40px;margin-left: 2%;background-color: #92C2EB;line-height: 40px;" v-if="can">提交</button>
		<button style="width: 96%;height: 40px;margin-left: 2%;background-color: #007AFF;line-height: 40px;color: #fff;" v-else @click="toyan()">提交</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				can:true,
				name: '',
				password: '',
				newpassword: '',
				okpassword: '',
				nameTips: '',
				passwordTips: '',
				newpasswordTips: '',
				okpasswordTips: '',
				datetimerange: ["2021-03-20 20:10:10", "2021-05-10 10:10:10"]
			}
		},
		methods: {
			datetimeranges() {
				console.log("范围选:", this.datetimerange);
			},
			usernames() {
				var reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
				if (this.name == "") {
					return this.nameTips = "用户名不能为空";
					// return false;
				} else if (!reg_tel.test(this.name)) {
					return this.nameTips = "请正确填写您的手机号码！";
					// alert("请正确填写您的手机号码！");
				} else {
					this.valueName = false;
					return this.nameTips = ''
				}
			},
			passwords() {
				if (this.password == '') {
					this.nameTips = '';
					this.newpasswordTips = '';
					this.okpasswordTips = '';
					return this.passwordTips = "密码不能为空";

				} else if (this.password.length < 6) {
					this.nameTips = '';
					this.nameTips = '';
					this.newpasswordTips = '';
					this.okpasswordTips = '';
					return this.passwordTips = "大于六个字符";

				} else {
					return this.passwordTips = ''
				}
			},
			newpasswords() {
				if (this.newpassword == '') {
					this.nameTips = '';
					this.passwordTips = '';
					this.okpasswordTips = '';
					return this.newpasswordTips = "新密码不能为空";

				} else if (this.newpassword.length < 6) {
					this.nameTips = '';
					this.nameTips = '';
					this.passwordTips = '';
					this.okpasswordTips = '';
					return this.newpasswordTips = "新密码必须大于六个字符";

				} else {
					return this.newpasswordTips = ''
				}
			},
			okpasswords() {
				if (this.okpassword == '') {
					this.nameTips = '';
					this.passwordTips = '';
					this.newpasswordTips = '';
					return this.okpasswordTips = "密码不能为空";

				} else if (this.okpassword.length<6) {
					this.nameTips = '';
					this.passwordTips = '';
					this.newpasswordTips = '';
					return this.okpasswordTips = "两次输入的密码不相等";

				} else {
					this.can=false 
					return this.okpasswordTips = ''       
				}
			},
			toyan(){
				this.can=true
				uni.navigateTo({
					url:'../codecard/codecard'
				})
			}
		},
		mounted() {
			setTimeout(() => {
				this.datetimesingle = "2021-5-1";
				this.single = "2021-5-1";
			}, 1000);
		},
	}
</script>

<style scoped>
	.tip {
		width: 100%;
		height: 50px;
		line-height: 50px;
		font-size: 15px;
		padding-left: 2%;
		background-color: #eeeeee;
		color: #ccc;
	}

	.input {
		width: 100%;
		height: 60px;
		line-height: 40px;
		display: flex;
		flex-wrap: nowrap;
		background-color: #FFF;
	}

	.input_left {
		width: 25%;
		padding-left: 20px;
		font-size: 14px
	}

	.input_right {
		width: 75%;
	}

	.uni-input {
		background-color: #fff;
		width: 100%;
		height: 30px;
		text-indent: 10px;
		border-radius: 5px;
		margin-top: 4px;
		border-top: 0px;
		border-left: 0px;
		border-right: 0px;
		border-bottom: solid 1px #c0c0c0;
	}

	.textdTips {
		font-size: 12px;
		height: 25px;
		color: red;
		margin-top: -10px;
	}
</style>
